<template>
  <el-card class="app-container">
    <div v-if="!isEdit">
      <div class="itemTitle">特殊作业申请</div>
      <div class="search">
        <el-form :inline="true" :model="queryParams" ref="queryForm" label-width="120">
          <el-row>
            <el-col
              :span="item.span"
              v-for="(item, index) in queryParamsList"
              :key="index"
            >
              <!-- input -->
              <el-form-item
                v-if="item.type == 'input'"
                :label="item.label"
                :prop="item.prop"
              >
                <el-input
                  style="width: 100%"
                  v-model="queryParams[item.prop]"
                  :placeholder="'请输入' + item.label"
                />
              </el-form-item>
              <!-- select -->
              <el-form-item
                v-if="item.type == 'select'"
                :label="item.label"
                :prop="item.prop"
              >
                <el-select
                  v-model="queryParams[item.prop]"
                  :placeholder="'请输入' + item.label"
                  clearable
                  style="width: 100%"
                >
                  <el-option
                    v-for="val in ticketType"
                    :key="val.dictValue"
                    :label="val.dictLabel"
                    :value="val.dictValue"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="item.type == 'selectState'"
                :label="item.label"
                :prop="item.prop"
              >
                <el-select
                  v-model="queryParams[item.prop]"
                  :placeholder="'请选择' + item.label"
                >
                  <el-option
                    v-for="val in stateList"
                    :key="val.dictValue"
                    :label="val.dictLabel"
                    :value="val.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item>
                <el-button type="primary" @click="handleSearch">搜索</el-button>
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="content">
        <div class="ct-btns">
          <el-button type="primary" @click="handleAdd">新增</el-button>
          <el-button type="success">批量导入</el-button>
          <el-button type="warning">批量导出</el-button>
        </div>
        <div class="ct-table">
          <elTables
            :table-data="tableData"
            :columns="tableColumns"
            :handle-current-change="handleCurrentChange"
            isPagin
            :curHeight="tableHeight"
          />
        </div>
      </div>
    </div>
    <div v-if="isEdit">
      <header>
        <i
          style="font-size: 18px; cursor: pointer; margin-right: 8px"
          class="el-icon-arrow-left"
          @click="isEdit = !isEdit"
        ></i>
        <span>新增作业</span>
      </header>
      <section class="edit-body" style="overflow-y: scroll">
        <Approve v-if="form.ticketType=='DH'"></Approve> 
        <el-form
          ref="form"
          :model="form"
          :readonly="readonly"
          :rules="rules"
          label-width="220px"
        >
          <el-row
            v-if="form.ticketType !== 'FC'"
            style="
              display: flex !important;
              justify-content: space-around !important;
              flex-wrap: wrap;
            "
          >
            <el-col
              :span="item.span"
              v-for="(item, index) in formList"
              :key="index"
            >
              <!-- input -->
              <el-form-item
                v-if="item.type == 'input'"
                :maxlength="item.maxlength"
                :label="item.label"
                :prop="item.prop"
              >
                <el-input
                  style="width: 100%"
                  v-model.trim="form[item.prop]"
                  :disabled="true"
                  placeholder="自动生成"
                />
              </el-form-item>
              <!-- date -->
              <el-form-item
                v-if="item.type == 'date'"
                :label="item.label"
                :prop="item.prop"
              >
                <el-date-picker
                  :readonly="readonly"
                  :disabled="true"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  v-model="form[item.prop]"
                  type="datetime"
                  placeholder="自动生成"
                >
                </el-date-picker>
              </el-form-item>
              <!-- select -->
              <el-form-item
                v-if="item.type == 'select'"
                :label="item.label"
                :prop="item.prop"
              >
                <el-select
                  :disabled="readonly"
                  v-model="form[item.prop]"
                  :placeholder="'请选择' + item.label"
                  style="width: 100%"
                  :readonly="disabled"
                >
                  <el-option
                    v-for="val in item.typeOptions"
                    :key="val.dictValue"
                    :label="val.dictLabel"
                    :value="val.dictValue"
                  />
                </el-select>
              </el-form-item>
              <!-- selectDept -->
              <el-form-item
                v-if="item.type == 'selectDept'"
                :label="item.label"
                :prop="item.prop"
              >
                <inputTreeselect
                  @emitDeptId="emitDeptId"
                  v-model="form[item.prop]"
                  :disabled="disabled"
                ></inputTreeselect>
              </el-form-item>
              <!-- selectDuty -->
              <el-form-item
                v-if="item.type == 'selectDuty'"
                :label="item.label"
                :prop="item.prop"
              >
                <deptAndDutys
                  type-show="duty"
                  @dutyChange="dutyChange"
                  :listUser="listUser"
                  :dutyId="form[item.prop]"
                  :disabled="disabled"
                ></deptAndDutys>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-else>
            <el-col :span="8">
              <el-form-item label="作业类型" prop="ticketType">
                <el-select
                  :disabled="readonly"
                  v-model="form.ticketType"
                  placeholder="请选择作业类型"
                  style="width: 100%"
                  :readonly="disabled"
                >
                  <el-option
                    v-for="val in ticketType"
                    :key="val.dictValue"
                    :label="val.dictLabel"
                    :value="val.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="非常规类型" prop="ticketType">
                <el-select
                  :disabled="readonly"
                  v-model="form.ticketType"
                  placeholder="请选择非常规类型"
                  style="width: 100%"
                  :readonly="disabled"
                >
                  <el-option
                    v-for="val in ticketType"
                    :key="val.dictValue"
                    :label="val.dictLabel"
                    :value="val.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="牵头单位" prop="ticketType">
                <inputTreeselect
                  @emitDeptId="emitDeptId"
                  v-model="form.address"
                  :disabled="disabled"
                ></inputTreeselect>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <DH @close="handleAddClose" v-if="form.ticketType == 'DH'" @formData="formData" />
        <DZ @close="handleAddClose" v-if="form.ticketType == 'DZ'" />
        <DT @close="handleAddClose" v-if="form.ticketType == 'DT'" />
        <DL @close="handleAddClose" v-if="form.ticketType == 'DL'" />
        <FC @close="handleAddClose" v-if="form.ticketType == 'FC'" />
        <SX @close="handleAddClose" v-if="form.ticketType == 'SX'" />
      </section>
      <div class="dialog-footer" style="text-align: center; margin-top: 20px">
        <el-button @click="cancel" style="margin-right: 10px">取 消 </el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </div>
  </el-card>
</template>
<script>
const defaultQueryParams = {
  pageNum: 1,
  pageSize: 10,
};
import { listUser } from "@/api/system/user.js";
import DH from "./components/DH/index.vue"; //动火
import DT from "./components/DT/index.vue"; //动土
import DZ from "./components/DZ/index.vue"; //吊装
import DL from "./components/DL/index.vue"; //断路
import GC from "./components/GC/index.vue"; //高处
import MB from "./components/MB/index.vue"; //盲板
import SX from "./components/SX/index.vue"; //受限
import LD from "./components/LD/index.vue"; //临电
import FC from "./components/FCG/index.vue"; //非常规
import Approve from './components/approve/index.vue' //审批流程
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  components: { Treeselect, DH, DZ, DT, DL, GC, MB, SX, LD, FC,Approve },
  data() {
    return {
      listUser: [],
      ticketType: [], //作业票类型
      stateList: [], //作业票状态
      isEdit: false,
      dialogFormVisible: false,
      tableHeight: 0,
      tableColumns: [
        {
          key: "identifyStatus",
          title: "状态",
        },
        {
          title: "操作",
          align: "center",
          fixed: "right",
          width: 200,
          render: (h, params) => {
            return h("div", [
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  on: {
                    click: () => {},
                  },
                },
                "审核"
              ),
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  on: {
                    click: () => {},
                  },
                },
                "查看"
              ),
              h(
                "el-button",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  on: {
                    click: () => {},
                  },
                },
                "克隆"
              ),
            ]);
          },
        },
      ],
      tableData: [
        {
          createTime: "2023-10-12",
          fileCount: 10,
          createBy: "张三",
          identifyStatus: "成功",
        },
        {
          createTime: "2023-10-12",
          fileCount: 10,
          createBy: "张三",
          identifyStatus: "成功",
        },
        {
          createTime: "2023-10-12",
          fileCount: 10,
          createBy: "张三",
          identifyStatus: "成功",
        },
      ],
      queryParams: {
        ...defaultQueryParams,
      },
      queryParamsList: [
        {
          label: "作业类型",
          prop: "ticketType",
          span: 5,
          type: "select",
        },
        {
          label: "作业状态",
          prop: "state",
          span: 5,
          type: "selectState",
          options: [
            {
              value: "选项1",
              label: "黄金糕",
            },
            {
              value: "选项2",
              label: "双皮奶",
            },
          ],
        },
        {
          label: "作业票编号",
          prop: "ticketNumber",
          span: 5,
          type: "input",
        },
      ],
      total: 22,
      // 状态数据字典
      statusOptions: [],
      form: {},
      rules: {},
      formList: [
        {
          label: "作业类型",
          prop: "ticketType",
          span: 8,
          type: "select",
        },
        // {
        //   label: "非常规类型",
        //   prop: "ticketType",
        //   span: 8,
        //   type: "selectFc",
        // },
        {
          label: "作业票编号",
          prop: "ticketNumber",
          span: 8,
          type: "input",
          maxlength: 300,
        },
        {
          label: "作业申请单位",
          prop: "workDeptId",
          span: 8,
          type: "selectDept",
        },
        {
          label: "作业申请人",
          prop: "workApplicant",
          span: 8,
          type: "selectDuty",
        },
        {
          label: "作业申请时间",
          prop: "workApplyTime",
          span: 8,
          type: "date",
        },
        {
          label: "措施编制人",
          prop: "workEditPerson",
          span: 8,
          type: "selectDuty",
        },
      ],
      readonly: false,
      disabled: false,
      infoOptions: [],
      options: [],
    };
  },
  created() {
    this.getDicts("work_ticket_type").then((response) => {
      this.ticketType = response.data;
      this.formList[0].typeOptions = response.data;
    });
    this.getDicts("ticket_state").then((response) => {
      this.stateList = response.data;
    });
    this.getListInfo();
  },
  mounted() {
    this.$nextTick(() => {
      this.getTableHeight();
    });
  },
  methods: {
    //获取人员列表
    getListInfo() {
      listUser().then((res) => {
        this.listUser = res.rows;
      });
    },
    handleSearch() {
      this.queryParams.pageNum=1
      this.getLists()
    },
    handleReset() {
      this.resetForm("queryForm");
      this.handleSearch();
    },
    // 获取页面list
    getLists() {},
    submitForm() {
      console.log(this.form);
    },
    cancel() {},
    handleAdd() {
      this.isEdit = true;
      this.form = { ticketType: "DH" };
    },
    emitDeptId(val) {},
    dutyChange(val) {},
    handleAddClose() {
      this.isEdit = false;
    },
    //同步子组件值
    formData(val){
      this.form = {...this.form, ...val}
    },
    handleAddByDialog() {
      this.dialogFormVisible = true;
    },
    getTableHeight() {
      let height = document.getElementsByClassName("ct-table")[0].clientHeight;
      this.tableHeight = height - 40;
    },
    handleCurrentChange(val) {
      console.log("val", val);
    },
  },
};
</script>    
<style lang="scss" scoped>
</style>